import React from 'react';
import { createModalContainer } from '../../../components/changeModal';
import {Button,Form , Icon, message, Select, Collapse, Checkbox} from 'antd';
import styles from './index.less';
import { connect } from 'dva';
import router from 'umi/router';
const FormItem = Form.Item;
const Option = Select.Option;
const Panel = Collapse.Panel;

@Form.create()
class ChangeClassifyComponent extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        activeKey: [],
        GroupIds:[]
      }
  }

  componentWillMount() {
    window.Isoption = false;
  }
  componentDidMount() {
    window.Isoption = true;
  }


//取消
handleCancel =() => {
  this.props.cancel();
}

handleChange = value => {
    this.setState({
        TagId: value
    })
}

clickManage = () => {
    router.replace({
      pathname: `/${window.storeId}/goods/groups`,
    });
  };

     //提交
    handleSubmit = e => {
        e.preventDefault();
        const {GroupIds} = this.state;
        const { dispatch } = this.props;
        const {selectedUserIds} = this.props.param;
        if (GroupIds.length> 0) {
            this.props.form.validateFields(async (err, values) =>{
                if(!err) {
                    dispatch({
                        type: 'pruductSellList/UpdateProductsGroup',
                        payload: {
                            ProductIds:selectedUserIds.toString(),
                            GroupIds: GroupIds.toString()
                        },
                        callBack: {
                            success: res => {
                              if (res.Code === 0) {
                                message.success('修改成功');
                                this.props.ok();
                              }
                            },
                            error: res => {
                              message.error(res.Msg);
                            },
                          },
                    })                   
              }
            })
        } else {
            message.error('最少选择一个分类')
        }
    }

    onChange = (activeKey) => {
        this.setState({
          activeKey,
        });
      }

      clickCheckBox =(e) => {
          const {GroupIds} = this.state;
          let indexItem = GroupIds.findIndex(item => item=== e);
          if (indexItem > -1) {
            GroupIds.splice(indexItem, 1);
          } else {
            GroupIds.push(e)
          }       
      }

      renderHeader(name, id) {
          const {activeKey} = this.state;
          const choiceId = id.toString();
          return (
              <div style={{marginLeft: 12}}>
                {activeKey.findIndex(value => value === choiceId) > -1 ?
                    <Icon type="minus-square" style={{color: 'rgba(0,0,0, .3)', marginRight: 8}}/>:
                    <Icon type="plus-square" style={{color: 'rgba(0,0,0, .3)', marginRight: 8}} />
                }       
                {name}
              </div>
          )
      }

    render() {
      const {productGroupList, loading1} = this.props;
      const {activeKey} = this.state;
        return (
            <div style={{marginTop: 24}}>
                <Button style={{marginLeft: 24, marginBottom: 16}} onClick={this.clickManage}>管理分类</Button>
                <Form onSubmit={this.handleSubmit}>
                <Collapse
                    onChange={this.onChange}
                    bordered={false}
                >
                    {productGroupList && productGroupList.filter(item=> item.Id!==0).map((item, index) => {
                        return (
                            <Panel header={this.renderHeader(item.Name, item.Id)} key={item.Id} className={styles.modalPanel} showArrow={false}>
                                {
                                    item.SecondList && item.SecondList.map((v, i) => {
                                        return (
                                            <div key={i} className={styles.modalCheckBoxLine}>
                                                <Checkbox onChange={() => this.clickCheckBox(v.Id)}>{v.Name}</Checkbox>
                                            </div>
                                       )
                                    })
                                }
                           </Panel>
                        )
                    })}
                </Collapse> 
                    <FormItem className="xkd-model-footBtn">
                        <Button onClick={this.handleCancel} className="xkd-mr8">
                            取消
                        </Button>
                        <Button
                            type="primary"
                            htmlType="submit"
                            loading={loading1}
                        >
                            保存
                        </Button>
                    </FormItem>
                </Form>
           </div>
        )
    }
}

const ChangeClassify = createModalContainer(
    connect(({pruductSellList,loading})=> ({
        productGroupList: pruductSellList.productGroupList,
        loading1: loading.effects['pruductSellList/UpdateProductsGroup'], 
    }))(ChangeClassifyComponent),
    true,
    true
);

export default ChangeClassify;